<template>
	<div class="cvu-button-group">
        <slot />
    </div>
</template>

<script>
export default {
    name: 'cvu-button-group',
    components: {},
    props: {},
    data() {
        return {}
    },
    computed: {},
    watch: {},
    methods: {}
}
</script>

<style lang="scss" scoped>
@import '../../../style/_index.scss';
.cvu-button-group {
    display: inline-block;
    vertical-align: middle;
    font-size: 0px;
    &::after,
    &::before {
        display: table;
        content: ""
    }
    &::after {
        clear: both
    }
    &.cvu-button-group+.cvu-button-group{
        margin-left: 10px;
    }
    .cvu-button {
        float: left;
        position: relative;
    }
    .cvu-button+.cvu-button {
        margin-left: 0 !important;
    }

    .cvu-button:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .cvu-button:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .cvu-button:first-child:last-child {
        border-radius: 4px
    }

    .cvu-button:first-child:last-child.is-round {
        border-radius: 20px
    }

    .cvu-button:first-child:last-child.is-circle {
        border-radius: 50%
    }

    .cvu-button:not(:first-child):not(:last-child) {
        border-radius: 0
    }

    .cvu-button:not(:last-child) {
        margin-right: -2px
    }

    .cvu-dropdown>.cvu-button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left-color: rgba(255, 255, 255, .5)
    }

    .cvu-button-primary:first-child {
        border-right-color: rgba(255, 255, 255, .5)
    }

    .cvu-button-primary:last-child {
        border-left-color: rgba(255, 255, 255, .5)
    }

    .cvu-button-primary:not(:first-child):not(:last-child) {
        border-left-color: rgba(255, 255, 255, .5);
        border-right-color: rgba(255, 255, 255, .5)
    }

    .cvu-button-success:first-child {
        border-right-color: rgba(255, 255, 255, .5)
    }

    .cvu-button-success:last-child {
        border-left-color: rgba(255, 255, 255, .5)
    }

    .cvu-button-success:not(:first-child):not(:last-child) {
        border-left-color: rgba(255, 255, 255, .5);
        border-right-color: rgba(255, 255, 255, .5)
    }

    .cvu-button-warning:first-child {
        border-right-color: rgba(255, 255, 255, .5)
    }

    .cvu-button-warning:last-child {
        border-left-color: rgba(255, 255, 255, .5)
    }

    .cvu-button-warning:not(:first-child):not(:last-child) {
        border-left-color: rgba(255, 255, 255, .5);
        border-right-color: rgba(255, 255, 255, .5)
    }

    .cvu-button-danger:first-child {
        border-right-color: rgba(255, 255, 255, .5)
    }

    .cvu-button-danger:last-child {
        border-left-color: rgba(255, 255, 255, .5)
    }

    .cvu-button-danger:not(:first-child):not(:last-child) {
        border-left-color: rgba(255, 255, 255, .5);
        border-right-color: rgba(255, 255, 255, .5)
    }

    .cvu-button-info:first-child {
        border-right-color: rgba(255, 255, 255, .5)
    }

    .cvu-button-info:last-child {
        border-left-color: rgba(255, 255, 255, .5)
    }

    .cvu-button-info:not(:first-child):not(:last-child) {
        border-left-color: rgba(255, 255, 255, .5);
        border-right-color: rgba(255, 255, 255, .5)
    }
}
</style>
